<template>
    <div class="container-box">
      <el-card class="box-card" v-for="item in this.cardList" shadow="hover">
        <div class="card-title">{{item.prdName}}</div>
        <!--<div class="crad-image" :style="'background-image: url('+item.imgUrl+');'">-->
        <div class="crad-image">
          <img :src="item.imgUrl">
        </div>
        <div class="card-message">
          Height
          <el-progress color="#d6d9e0" class="card-progress" :text-inside="true" :show-text="false" :stroke-width="10" :percentage="item.height/170*100"></el-progress>
          Width
          <el-progress color="#d6d9e0" class="card-progress" :text-inside="true" :show-text="false" :stroke-width="10" :percentage="item.width/90*100"></el-progress>
          Depth
          <el-progress color="#d6d9e0" class="card-progress" :text-inside="true" :show-text="false" :stroke-width="10" :percentage="item.depth/10*100"></el-progress>
          Weight
          <el-progress color="#d6d9e0" class="card-progress" :text-inside="true" :show-text="false" :stroke-width="10" :percentage="item.weight/250*100"></el-progress>
        </div>
        <div class="card-button">
          <el-button type="text" slot="reference">配置信息</el-button>
        </div>
      </el-card>
    </div>
</template>

<script>
export default {
  name: 'Apple',
  data() {
    return {
      cardList: [
        {
          "id": 1,
          "prdName": "iphone 12 Pro Max",
          "imgUrl": require("../../assets/img/apple/iPhone12pro.jpg"),
          "height": 160.8,
          "width": 78.1,
          "depth": 7.4,
          "weight": 226,
        },
        {
          "id": 2,
          "prdName": "iphone 11",
          "imgUrl": require("../../assets/img/apple/iphone11.jpg"),
          "height": 150.9,
          "width": 75.7,
          "depth": 8.3,
          "weight": 194,
        },
        {
          "id": 3,
          "prdName": "iphoneX",
          "imgUrl": require("../../assets/img/apple/iphonex.jpg"),
          "height": 143.6,
          "width": 70.9,
          "depth": 7.7,
          "weight": 174,
        },
        {
          "id": 4,
          "prdName": "iphone8",
          "imgUrl": require("../../assets/img/apple/iphone8.jpg"),
          "height": 138.4,
          "width": 67.3,
          "depth": 7.3,
          "weight": 148,
        },
        {
          "id": 5,
          "prdName": "iphone7",
          "imgUrl": require("../../assets/img/apple/iphone7.jpg"),
          "height": 138.3,
          "width": 67.1,
          "depth": 7.1,
          "weight": 138,
        },
        {
          "id": 6,
          "prdName": "iphone6",
          "imgUrl": require("../../assets/img/apple/iphone6.jpg"),
          "height": 138.1,
          "width": 67.0,
          "depth": 6.9,
          "weight": 129,
        },
      ]
    };
  },
  methods: {
  }
};
</script>

<style scoped>
  .container-box{
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
  }
  .box-card {
    width: 30%;
    margin: 0 3% 3% 0;
  }
  .card-title{
    width: 100%;
    margin-bottom: 10px;
    font-weight: bold;
  }
  .crad-image{
    width: 50%;
    height: auto;
    position: relative;
    float: right;
  }
  .crad-image img{
    width: 100%;
    height: auto;
  }
  .card-message{
    width: 50%;
    position: relative;
    float: left;
    margin-bottom: 10px;
    font:12px Extra;
    font-family: Arial;
  }
  .card-progress{
    margin: 4px 10px 7px 0;
  }
  .card-button {
    width: 100%;
    position: relative;
    float: right;
    text-align: center;
  }
</style>
